<template>
	<view>
		<view class="container">
			<!-- F1 标题 -->
				<view class="title">{{data.title}}</view>
				<!-- F2 介绍 -->
				<view class="introduce">
					{{data.introduce}}
				</view>
				<!-- F3 水平横拉图 开始 -->
				<view class="horizontal_view">
					<scroll-view :scroll-x="true">
						<view class="X_view">
							<image v-for="(img,index) in data.menbers_img" :src="img" mode=""></image>
						</view>
					</scroll-view>
				</view>
				<!-- F3 水平横拉图  结束 -->
				
				<!-- F4 组织列表 开始 -->
				<view class="strucurueTitle">
					{{data.subTitle}}
				</view>
				<uniList>
					<uni-list-item 
					v-for="(choose,index) in data.options"
					:key='index'
					 :title="choose" 
					 note=""></uni-list-item>
					
				</uniList>
				<!-- F4 组织列表 结束 -->
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	export default {
		components:{
			uniList
		},
		data() {
			return {
				data:{
					title:'阴平村党总支',
					introduce:'由xxxx批准，成立于2008年7月，现有支部3个，共有正式党员134人，预备党员5人，入党积极分子6人。',
					subTitle:'党组织结构',
					// 成员图片列表
					menbers_img:[
						'../../../static/image/organizationStrucure/menbers.png',
						'../../../static/image/organizationStrucure/menbers_1.png',
						'../../../static/image/organizationStrucure/menbers.png',
						'../../../static/image/organizationStrucure/menbers_1.png',
					],
					// 选项列表
					options:[
						'阴平村党总支',
						'阴平村党一支部',
						'阴平村党二支部',
						'阴平村党三支部',
						'阴平村党四支部'
					],
				}
				
				
			};
		}
	}
</script>

<style lang="scss">
	:not(not){
		box-sizing: border-box;
	}
	.container{
		padding: 30rpx;
		//F1 标题
		.title{
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 700;
				font-size: 24px;
				line-height: 34px;
				margin-bottom: 32rpx;
		}
		// F2 介绍
		.introduce{
			height: 132rpx;
			color: #9F9F9F;
			padding-left: 30rpx;
			border-left: 2px solid #33D6A6;
			background-image: url(../../../static/image/organizationStrucure/badge.png);
			background-repeat: no-repeat;
			background-position: right;
			margin-bottom: 32rpx;
		}
		//F3 水平横拉图
		.horizontal_view{
			height: 160rpx;
			.X_view{
				display: inline-flex;
			}
			image{
				display:inline-block;
				width: 248rpx;
				height: 160rpx;
				margin-right: 32rpx;
			}
		}
		
		// F4 列表
		.strucurueTitle{
			margin-top: 32rpx;
			margin-bottom: 16rpx;
			font-size: 32rpx;
			
		}
	}
	
</style>
